<template>
  <div class="taskWrapper">
    <div class="taskBox">
          <div class="taskMineInfo" v-loading="loading">
              <div class="task-container">
                  <div class="top">
                  <TaskHeader :title="dataDetail.name || '作业内容'" :leftText="{ label: '返回学习列表', path: '' }" />
                  <TaskDesc :desc="dataDetail.description || '作业描述'"/>
                  <TaskExamInfo :examList="dataDetail.paperList"/>
                  <TaskDownload :downloadList="dataDetail.fileList"/>
                  <TaskUpload :file-list="dataDetail.recordList" :upload-url="uploadUrl" :eid="dataDetail.id" @updateFileList="handleUpdateFileList" />
              </div>
              <el-divider />
                  <div class="task-footer">
                     <div class="left-footer">作业更新于{{updateTime}}</div>
                     <div class="right-footer">
                      <span class="update-time-text">点击确认作业完成情况</span>
                      <el-button type="primary" @click="handleComplete">完成</el-button>
                     </div>
                  </div>
              </div>
          </div>
      </div> 
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import TaskHeader from '../../../../minTask/TaskHeader.vue';
import TaskExamInfo from '../../../../minTask/TaskExamInfo.vue';
import TaskUpload from '@/components/TaskUpload.vue'
import TaskDesc from '../../../../minTask/TaskDesc.vue'
import TaskDownload from '../../../../minTask/TaskDownload.vue';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';

import { myHomeworkDetail, myHomeworkSubmit } from '@/service/personalCenter';

// 作业ID
const homeworkId = ref(0);
const dataDetail = ref({})
const loading = ref(false);
// 标题
const title = ref('');
// 更新时间
const updateTime = ref('');
// 上传URL
// const uploadUrl = ref('http://10.6.40.37:8014/client/homework/file/add');
const uploadUrl = ref('https://admin.testace.cn/fenglingClient/client/homework/file/add');

// 获取作业详情
const getHomeworkDetail = async () => {
  try {
    const params = {
      id: homeworkId.value
    };
    loading.value = true;
    const res = await myHomeworkDetail(params);
    if (res && res.code === '000000') {
      const data = res.data;
      dataDetail.value = data;
      updateTime.value = dayjs(data.hand_time * 1000).format('YYYY-MM-DD HH:mm:ss');
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
    console.error('获取作业详情失败', error);
  }
};

// 标记作业完成
const handleComplete = async () => {
  try {
    const params = {
      id: homeworkId.value
    };
    const res = await myHomeworkSubmit(params);
    if (res && res.code === 200) {
      // 提交成功
      ElMessage.success('作业提交成功');
    }
  } catch (error) {
    console.error('作业提交失败', error);
  }
};

onMounted(() => {
  getHomeworkDetail();
});

const handleUpdateFileList = (newFileList) => {
  dataDetail.value.recordList = newFileList;
}
</script>
<style lang="scss" scoped>
.taskWrapper {
  width: 100%;
  background-color: #EAF4F2;

  .taskHeader {
      background: #FFFFFF;
      width: 100%;
      height: 64px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .left {
          display: flex;
          position: absolute;
          top: 50%;
          left: 20px;
          transform: translate(0px, -50%);
          align-items: center;

          .leftBack {
              font-size: 14px;
              font-weight: 400;
              color: #333333;
          }
      }

      .header-center {
          color: #333333;
          font-size: 18px;
          font-weight: 600
      }


  }


  .taskBox {

      display: flex;
      justify-content: center;

      .taskMineInfo {
          width: 100%;
          background-color: #FFFFFF;
          border-radius: 8px;
          .top{
              padding:0px 20px;
          }
      }
  }
}
.task-footer{
  padding:20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left-footer{
      font-family: PingFang SC;
font-size: 14px;
font-weight: 400;
line-height: 19.6px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color:#333333;
  }
  .right-footer{
      display: flex;
      align-items: center;
      .update-time-text{
          font-family: PingFang SC;
font-size: 12px;
font-weight: 400;
line-height: 16.8px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color:#999;margin-right:10px;
      }
  }
}
:deep(.el-divider--horizontal){
  margin:0px;
}
</style>